{% if faqs.links.size > 0 %}
<div class="faq-menu accordion-item py-md-4 py-2 border-0 "> 
{% comment %} pt-0 {% endcomment %}
{% comment %} rounded-top-left-md-2 rounded-top-left-0 rounded-top-right-md-2 rounded-top-right-0 {% endcomment %}
  <div class="accordion-body p-0">
    <ul class="as-nav nav flex-column">
      {%- for faq_category in faqs.links -%}
        <li class="as-nav-item nav-item px-0 w-100">
          {% if faq_category.levels == 0 %}
            {% comment %} 一级 {% endcomment %}
            <a
              href="#{{ faq_category.handle }}"
              id="as-link-{{ section.id }}-{{ faq_category.handle }}-{{ port }}"
              class="as-nav-link-{{ port }}  nav-link px-4 text-wrap"
              data-bs-toggle="pill"
              data-bs-target="#as-{{ section.id }}-{{ forloop.index0 }}-{{ faq_category.handle }}"
              aria-controls="as-{{ section.id }}-{{ forloop.index0 }}-{{ faq_category.handle }}"
              role="tab"
              data-text="{{ faq_category.title }}"
              {% if forloop.first %}
                aria-current="true"
              {% endif %}
            >
              <span class="pe-3">{{ faq_category.title }}</span>
            </a>
          {% else %}
            {% comment %} 二级 {% endcomment %}
            <a
              class="accordion-button collapsed nav-link px-4 fs-6 cursor-pointer text-wrap"
              data-bs-toggle="collapse"
              data-bs-target="#as-collapse-{{ port }}-{{ section.id }}-{{ faq_category.handle }}-{{ forloop.index0 }}"
              role="tab"
            >
              <span class="pe-3">{{ faq_category.title }}</span>
            </a>
            {% comment %} 二级下菜单 {% endcomment %}
            <div
              class="collapse ps-3 as-collapse-{{ port }}-level-{{ section.id }}-{{ faq_category.handle }}-{{ forloop.index0 }}"
              id="as-collapse-{{ port }}-{{ section.id }}-{{ faq_category.handle }}-{{ forloop.index0 }}"
            >
              {% assign index = forloop.index0 %}
              {% for item in faq_category.links %} 
                <a
                  id="as-link-{{ section.id }}-{{ item.handle }}-{{ port }}"
                  data-levels-class="as-collapse-{{ port }}-level-{{ section.id }}-{{ faq_category.handle }}-{{ index }}"
                  href="#{{ item.handle }}"
                  class="as-nav-link-{{ port }} nav-link px-4 text-wrap"
                  data-bs-toggle="pill"
                  data-bs-target="#as-{{ section.id }}-{{ forloop.index0 }}-{{ item.handle }}"
                  aria-controls="as-{{ section.id }}-{{ forloop.index0 }}-{{ item.handle }}"
                  role="tab"
                  data-text="{{ item.title }}"
                >
                  <span class="pe-3">{{ item.title }}</span>
                </a>
              {% endfor %}
            </div>
          {% endif %}
        </li>
      {%- endfor -%}
    </ul>
  </div>
</div>
{% endif %}